<script setup>
import { cart } from '@/stores/cart.js'
import { onMounted, ref, computed } from 'vue'
import { xiugaiCart } from '@/api/cartAPI.js'
const cartStore = cart()
let tableData = ref([])
const myTable = ref()
onMounted(() => {
  tableData.value = cartStore.cart.map((ele) => {
    return {
      skuId: ele.skuId,
      picture: ele.picture,
      price: ele.nowPrice,
      name: ele.attrsText,
      number: ele.count,
      total: ele.count * ele.nowPrice
    }
  })
  myTable.value.toggleAllSelection()
})

//点击删除事件
const del = async (id) => {
  await cartStore.delcartdata(id)
  tableData.value = cartStore.cart.map((ele) => {
    return {
      skuId: ele.skuId,
      picture: ele.picture,
      price: ele.nowPrice,
      name: ele.attrsText,
      number: ele.count,
      total: ele.count * ele.nowPrice
    }
  })
}
//被选中的数据的处理
let selectedData = []
let xiugai = {
  selected: '',
  ids: []
}
const onSelect = async (vals) => {
  //全否
  xiugai.selected = false
  cartStore.cart.forEach((ele) => {
    xiugai.ids.push(ele.skuId)
  })
  await xiugaiCart(xiugai)
  //选中
  selectedData = vals
  xiugai.ids = []
  vals.forEach((val) => {
    xiugai.ids.push(val.skuId)
  })
  xiugai.selected = true
  await xiugaiCart(xiugai)
  tolPrice.value = computed(() => {
    return +selectedData.reduce((sum, ele) => sum + ele.total, 0).toFixed(2)
  })
  tolCount.value = computed(() => {
    return +selectedData.reduce((sum, ele) => sum + ele.number, 0)
  })
}
let tolCount = ref(0)
let tolPrice = ref(0)
</script>
<template>
  <div class="container">
    <el-table ref="myTable" :data="tableData" @selection-change="onSelect">
      <el-table-column type="selection" width="30px"></el-table-column>
      <el-table-column label="全选" width="55px"></el-table-column>
      <el-table-column width="120px" prop="picture">
        <template #default="scope">
          <img :src="scope.row.picture" alt="" />
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="name"
        width="300px"
      ></el-table-column>
      <el-table-column label="单价" prop="price"></el-table-column>
      <el-table-column label="数量" prop="number"></el-table-column>
      <el-table-column label="小计" prop="total">
        <template #default="scope">
          <span style="color: red">￥ {{ scope.row.total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="operate">
        <template #default="scope">
          <el-button type="danger" circle @click="del(scope.row.skuId)"
            >删</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <div class="left">
        <span style="border-right: 1px solid #333"
          ><router-link to="/">继续购物</router-link></span
        >
        <span>已选择：{{ tolCount }}件</span>
      </div>
      <div class="right">
        <span style="color: red; font-size: 25px; line-height: 50px"
          >总价格：{{ tolPrice }}元</span
        >
        <span
          style="
            font-size: 25px;
            background-color: green;
            text-align: center;
            width: 100px;
            line-height: 50px;
          "
          ><router-link style="color: white" to="/check"
            >去结算</router-link
          ></span
        >
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.footer {
  height: 50px;
  .left {
    float: left;
    width: 200px;
    height: 100%;
    span {
      font-size: 16px;
      line-height: 50px;
      padding: 10px;
    }
  }
  .right {
    float: right;
    width: 300px;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
